$(function(){
    // ------------点击按钮选择图片----------
    $('#chooseImage').click(function(){
        $('#file').click();
    });

    //---------------创建剪裁区----------------
    //找到剪裁区的图片
    let image = $('#image');
    //设置配置项
    let option = {
        //纵横比
        aspectRatio:1,
        //指定预览区
        preview:'.img-preview'
    };
    //调用cropper方法，创建剪裁区
    image.cropper(option);

    //文件域的内容改变的时候，更换剪裁区的图片
    $('#file').change(function(){
        console.dir(this);
        //1.找到选择的图片（文件对象）
        let file = this.files[0];
        //2.根据文件对象，生成一个临时url，用于访问被选择的图片
        let url = URL.createObjectURL(file);
        //更换剪裁区图片,设置src属性
        //1.先销毁原来的剪裁区，2.更换图片，3.重新创建剪裁区
        image.cropper('destroy').attr('src',url).cropper(option);
    });

    //------------------点击确定，裁剪，上传，实现修改头像----------------
    $('#sure').click(function(){
        //裁剪得到一张图片（Canvas图片）
        let i = image.cropper('getCroppedCanvas',{//创建一个Canvas画布
            width:100,
            height:100
        });
        //把图片转成base64格式
        let str = i.toDataURL();
        
        $.ajax({
            type:'POST',
            url:'/my/update/avatar',
            data:{avatar:str},
            success:function(res){
                layer.msg(res.message);
                if(res.status === 0){ 
                    //更换成功，调用父页面的getUserInfo()函数，重新渲染头像
                    window.parent.getUserInfo();
                }
            }
        });
    });
})